{% extends 'home.html' %}
{% block title %}
    <title>故障回溯</title>
{% endblock %}
<!-- Mirrored from www.zi-han.net/theme/hplus/projects.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:44 GMT -->
{% block custom_css %}
    <link href="/static/dist/summernote.css" rel="stylesheet"/>
    <link href="/static/css/Fliter.css" rel="stylesheet" />
    <style type="text/css">

        *{
            padding:0;
            margin:0;
            border:0;
            list-style: none;
            text-decoration: none;
        }

        .label-selected{

            min-height:38px;
            margin:10px 0;
            border:1px solid #ccc;
            background-color: #fff;
            position: relative;
        }

        .label-selected li {
            display: inline-block;
            height: 27px;
            line-height: 27px;
            font-size: .8rem;
            padding: 0 1rem;
            border: 1px solid #e6e6e6;
            border-radius: 2px;
            cursor: pointer;
            margin: 4px 2px;
            color: #666;
        }
        #labelItem{
            margin-bottom: 10px;
            display: none;
        }
        .label-item {
            border: 1px solid #e6e6e6;
            padding: 10px;
            border-radius: 0 2px 2px 0;
            position: relative;
            overflow: hidden;
            background: #fff;
        }
        .label-item li {
            display: inline-block;
            height: 27px;
            line-height: 27px;
            font-size: .8rem;
            padding: 0 1rem;
            border: 1px solid #e6e6e6;
            border-radius: 2px;
            cursor: pointer;
            margin-bottom: 5px;
            margin-left: 2px;
            color: #666;
        }
        .label-item .selected{
            color:#ccc;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="modal fade" id="addtips" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加标签
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="modal-body">
                        <div class="form-group ">
                            <label class="col-md-3 control-label" style="margin-top: 7px">标签名称:</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="newtips" placeholder="" type="text" value=""/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" data-dismiss="modal">&nbsp取消</button>
                    <button type="submit" class="btn btn-primary " onclick="appendtips()">&nbsp确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->

    </div>
    <div class="page-header">
        <div class="row">
            <div class="col-sm-6">
                <h4>新建文档</h4>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 animated fadeInRight">
            <div class="mail-box">
                <div class="mail-body">
                    <div class="form-horizontal" >
                        <div class="form-group">
                            <label class="col-sm-1 control-label">主题：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="zhutiinput" placeholder="内容标题">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-1 control-label" style="margin-top: 15px">标签：</label>
                            <div class="col-sm-10">
                                <div class="col-sm-12 label-selected">
                                    <a  class="layui-btn layui-btn-sm show-labelitem" style="float: left; margin: 4px; display: block;line-height: 30px;">展开标签库 </a>
                                    <a class="layui-btn layui-btn-sm hide-labelitem" style="float: right; margin: 4px; display: none;line-height: 30px;">收起标签库 </a>
                                    <input id="labs" type="hidden" name="label">
                                </div>
                                <div class=" col-sm-12 layui-col-md12" id="labelItem">
                                    <!--标签库-->
                                    <div class="label-item">
                                        <a onclick="openaddtip()" class="replacelable" style="position: absolute;right:1rem;bottom:.75rem;color: #1994dc">添加</a>
                                        <li data="邮箱"><span>邮箱</span></li>
                                        <li data="AD"><span>AD</span></li>
                                        <li data="DFS"><span>DFS</span></li>
                                        <li data="Python"><span>Python</span></li>
                                        <li data="C#"><span>C#</span></li>
                                        <li data="VUE"><span>VUE</span></li>
                                        <li data="故障"><span>故障</span></li>
                                        <li data="安全"><span>安全</span></li>
                                        <li data="杀毒软件"><span>杀毒软件</span></li>
                                        <li data="邮件网关"><span>邮件网关</span></li>
                                        <li data="LDAP"><span>LDAP</span></li>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-10 col-md-offset-1" >
                        <div class="xxxxm">
                            <div class="summernote">
                               
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <button type="submit" class="btn btn-primary" onclick="savesumon()">保存</button>
            </div>
        </div>
    </div>

{% endblock %}

{% block custom_js %}
    <script src="/static/dist/summernote.js"></script>
    <script src="/static/dist/lang/summernote-zh-CN.js"></script>
    <script src="/static/js/Filter.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".show-labelitem").on("click",function(){
                $(this).hide();
                $(".hide-labelitem").show();
                $("#labelItem").show();
            });
            $(".hide-labelitem").on("click",function(){
                $(this).hide();
                $(".show-labelitem").show();
                $("#labelItem").hide();
            });
            $(".label-item").on("click","li",function(){
                var id = $(this).attr("data");
                var text = $(this).children("span").html();
                var labelHTML = "<li data='"+id+"''>x  "+text+"</li>";

                if($(this).hasClass("selected")){
                    return false;
                }else if($(".label-selected").children("li").length >= 8){
                    swal("最多可以选择8个哦");
                    return false;
                }
                $(".label-selected").append(labelHTML);
                val = '';
                for(var i = 0; i < $(".label-selected").children("li").length; i++){
                    val += $(".label-selected").children("li").eq(i).attr("data")+',';
                }
                $("input[name='label']").val(val);
                $(this).addClass("selected");
            });
            var val = "";
            $(".label-selected").on("click","li",function(){
                var id = $(this).attr("data");
                val = '';
                $(this).remove();
                for(var i = 0; i < $(".label-selected").children("li").length; i++){
                    val += $(".label-selected").children("li").eq(i).attr("data")+',';
                }
                $("input[name='label']").val(val);
                $(".label-item").find("li[data='"+id+"']").removeClass("selected");
            });
        })
    </script>
    <script>
        $(function(){
            $('.summernote').summernote({
                height: 500,
                tabsize: 2,
                lang: 'zh-CN'
            });
        });

    </script>
    <script>
        function openaddtip() {
            $('#addtips').modal({
                keyboard: true,
                backdrop: false
            });
        }
        function appendtips() {
            var tipsname = document.getElementById("newtips").value;
            var labelHTML = "<li data='"+tipsname+"''>x "+tipsname+"</li>";
             document.getElementById('labs').value=tipsname
            $(".label-selected").append(labelHTML);
            $("#addtips").modal("hide");
        }
        function savesumon() {
            var titel = document.getElementById('zhutiinput').value;
            var tab1 = $("input[name='label']").val();
            var markup = $('.summernote').summernote('code');
            if(tab1 == ""){
                swal("请选择标签 ！！！！！");
            }
            else if (titel==""){
                swal("请输入主题 ！！！！！");
            }
            else if(markup=='\n' +
                '                               \n' +
                '                            ') {
                swal("请输入内容！！！！！")

            }
            else {
                $('.summernote').summernote('destroy');
                $.ajax({
                    url:{% url "savemess" %},
                    type:'POST',
                    dataType:'json',
                    data:{'titel':titel,'tab1':tab1,'markup':markup},
                    async:false,
                    success:function (data) {
                        if (data['isSuccess']) {
                            swal({
                                    title:"",
                                    text:"保存成功",
                                    type:"success",
                                    showConfirmButton:"true",
                                    confirmButtonText:"好的",
                                    animation:"slide-from-top"
                                },
                                function () {
                                    location.reload()
                                })
                        }
                        else {
                            swal(data['message'])
                        }
                    }
                });
            }
        }
    </script>
{% endblock %}

<!-- Mirrored from www.zi-han.net/theme/hplus/projects.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:44 GMT -->

